<template>
	<div class="regBox" v-if="is_show">
		<div class="con">
			<i aria-label="图标: close" class="close" @click="close">
				<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" data-icon="close" fill="currentColor" aria-hidden="true" focusable="false" class="">
					<g id="comm_icon_x" transform="translate(-1209.5 -160.5)">
						<path id="Line_14" data-name="Line 14" d="M14,15a1,1,0,0,1-.707-.293l-14-14a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0l14,14A1,1,0,0,1,14,15Z" transform="translate(1210.5 161.5)"></path>
						<path id="Line_15" data-name="Line 15" d="M0,15a1,1,0,0,1-.707-.293,1,1,0,0,1,0-1.414l14-14a1,1,0,0,1,1.414,0,1,1,0,0,1,0,1.414l-14,14A1,1,0,0,1,0,15Z" transform="translate(1210.5 161.5)"></path>
					</g>
				</svg>
			</i>
			<div class="title">{{$t('h_pcverifybox.title1')}}</div>
			<img class="verImg" @click="reloadImg" :src="imgUrl" >
			<div class="item" style="padding-left: 10px;">
				<el-input :placeholder="$t('h_pcverifybox.title2')" v-model="code" ></el-input>
			</div>
			<div class="btn" @click="submit">{{$t('h_pcverifybox.title3')}}</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				is_show:false,
				step:0,
				checked:true,
				imgUrl:'',
				code:'',
				key:'',
				ret:()=>{}
			};
		},
		created() {
			this.reloadImg()
		},
		methods: {
			reloadImg(){
				const loading = this.$loading({
				    lock: true,
				    text: 'Loading',
				    spinner: 'el-icon-loading',
				    background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.loginVerify(this.formData,(res)=>{
					loading.close();
					if(res.code == 0){
						this.key = res.data.key
						this.imgUrl = res.data.pic
					}else{
						// this.$message.error(res.msg);
					}
				})
			},
			open(ret){
				this.reloadImg()
				this.code = ''
				this.key = ''
				this.ret = ret
				this.is_show = true
			},
			close(){
				this.is_show = false
			},
			submit(){
				this.ret(this.code,this.key)
				this.close()
			},
		}
	}
</script>

<style lang="less" scoped>
	*{
		box-sizing: border-box;
	}
	.regBox{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .5);
		z-index: 997;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.con{
		width: 433px;
		height: 384px;
		background-color: var(--theme-top-nav-bg);;
		border: thin solid;
		border-color: var(--theme-color-line);
		border-radius: 10px;
		position: relative;
		padding: 0 23px 15px 23px;
	}
	.close{
		color: var(--theme-text-color);
		font-size: 12px;
		height: 44px;
		line-height: 44px;
		width: 44px;
		text-align: center;
		position: absolute;
		right: 0;
		top: 0;
	}
	.title{
		margin-top: 15px;
		margin-bottom: 31px;
		font-size: 17px;
		color: #fff;
		font-weight: 700;
		text-align: center;
	}
	.item{
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border: 1px solid var(--theme-color-line);
		color: rgba(0,0,0,.65);
		font-size: 14px;
		margin-bottom: 30px;
		border-radius: 5px;
	}
	.item i{
		width: 15px;
		height: 15px;
		color: var(--theme-alt-neutral-2);
		font-size: 14px;
	}
	/deep/ .el-input{
		flex: 1;
		height: 100%;
	}
	/deep/ .el-input__inner{
		width: 100% !important;
		height: 100% !important;
		border: 0!important;
		padding: 0 !important;
		font-size: 14px !important;
	}
	/deep/ .el-input__icon{
		width: 15px !important;
		height: 15px;
		color: var(--theme-alt-neutral-2);
		line-height: 2 !important;
		font-size: 18px !important;
		margin-right: 10px;
	}
	.item1{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}
	.fstart{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	/deep/ .el-checkbox__inner{
		width: 20px !important;
		height: 20px !important;
		margin-top: 0;
	}
	/deep/ .el-checkbox__inner::after{
		width: 40% !important;
		height: 72% !important;
		top: 0;
		left: 5px;
	}
	.text{
		font-size: 14px;
		color: var(--theme-primary-color);
		cursor: pointer;
	}
	.btn{
		width: 100%;
		height: 43px;
		text-align: center;
		line-height: 43px;
		background-color: var(--theme-primary-color);
		margin-bottom: 15px;
		color: #fff;
		font-size: 15px;
		border-radius: 10px;
		cursor: pointer;
	}
	.verImg{
		width: 100%;
		margin: 0 auto;
		border-radius: 10px;
		margin: 15px auto;
	}
</style>